<template>
	<view class="server-info">
		<view class="item">
			<view class="set-item">
				<view class="set-item-label"><text>服务时间</text></view>
			</view>
			<view class="content time" @click="openTimeLayer">
				<view>{{ data.serverData.worktimestart }}</view>
				<view>-</view>
				<view>{{ data.serverData.worktimeend }}</view>
			</view>
			<view class="tips">*我们将在您设置的服务时间内将您推荐展示给客户</view>
		</view>

		<view class="item">
			<view class="set-item">
				<view class="set-item-label"><text>所在行业</text></view>
				<view class="set-item-value" @click="getMaxClassListRequest">
					<text>修改</text>
					<icon class="iconfont icon">&#xe7d3;</icon>
				</view>
			</view>
			<view class="content type">
				<view v-for="(item, index) in data.serverTradeData" :key="item.id" class="type-item">{{ item.name }}</view>
			</view>
			<view class="tips">*选择您所在的行业，用于匹配或展示</view>
		</view>

		<view class="item">
			<view class="set-item">
				<view class="set-item-label"><text>服务分类</text></view>
				<view class="set-item-value" @click="getSortListRequest">
					<text>修改</text>
					<icon class="iconfont icon">&#xe7d3;</icon>
				</view>
			</view>
			<view class="content type">
				<view v-for="(item, index) in data.serverTypeData" :key="item.id" class="type-item">{{ item.sortname }}</view>
			</view>
			<view class="tips">
				*选择您的服务分类，用于匹配或展示
				<navigator class="gl" :url="serverTypetUrl">攻略</navigator>
			</view>
		</view>

		<view class="item">
			<view class="set-item">
				<view class="set-item-label"><text>服务关键词</text></view>
				<view class="set-item-value" @click="openKeyWordLayer">
					<text>修改</text>
					<icon class="iconfont icon">&#xe7d3;</icon>
				</view>
			</view>
			<view class="content type">
				<view v-for="(item, index) in data.serverKeyWordData" :key="index" class="type-item">{{ item }}</view>
			</view>
			<view class="tips">
				*为您匹配更精准的客户
				<navigator class="gl" :url="serverKeyWordUrl">攻略</navigator>
			</view>
		</view>
	</view>
	<server-time ref="serverTimeRef" @timeLayerCallback="timeLayerCallback"></server-time>
	<server-trade-type ref="serverTradeTypeRef" @tradeLayerCallback="tradeLayerCallback" @typeLayerCallback="typeLayerCallback"></server-trade-type>
	<server-key-word ref="serverKeyWordRef" @keyWordLayerCallback="keyWordLayerCallback"></server-key-word>
</template>

<script setup>
import { ref, reactive, computed, defineComponent } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import serverTime from '../components/server-time.vue';
import serverTradeType from '../components/server-trade-type.vue';
import serverKeyWord from '../components/server-keyword.vue';
import config from '@/uni.config.js';
import { getBusinessSvc, getMaxClassList, getSortList, editTrade, editSort, editLabels, setSvcTime } from '@/subpages/common/api/set.js';

const serverTimeRef = ref(null);
const serverTradeTypeRef = ref(null);
const serverKeyWordRef = ref(null);

const serverTypetUrl = computed(() => {
	return `/subpages/web/web?url=${encodeURIComponent(config.article.serverType)}`;
});
const serverKeyWordUrl = computed(() => {
	return `/subpages/web/web?url=${encodeURIComponent(config.article.serverKeyWord)}`;
});

const data = reactive({
	serverData: {},
	serverTradeData: [],
	serverTypeData: [],
	serverKeyWordData: [],
	time: 0
});

defineComponent({
	serverTime,
	serverTradeType,
	serverKeyWord
});
onLoad(() => {
	getBusinessSvcRequest();
});

//获取服务信息数据
async function getBusinessSvcRequest() {
	const res = await getBusinessSvc();
	data.serverData = res.data.data;
	data.serverTradeData = res.data.data.maxClass ? res.data.data.maxClass : [];
	data.serverTypeData = res.data.data.sortList ? res.data.data.sortList : [];
	if (res.data.data.LabelList) {
		res.data.data.LabelList.map(item => {
			data.serverKeyWordData.push(item.labelname);
		});
	}
}
//打开时间选择弹窗
function openTimeLayer() {
	serverTimeRef.value.open(data.serverData.worktimestart, data.serverData.worktimeend, '0');
}
//打开服务行业弹窗
async function getMaxClassListRequest() {
	const res = await getMaxClassList();
	openTradeLayer(res.data.data, '1', data.serverTradeData);
}
//打开服务分类弹窗
async function getSortListRequest() {
	const res = await getSortList();
	openTradeLayer(res.data.data, '2', data.serverTypeData);
}
function openTradeLayer(data, type, orient) {
	serverTradeTypeRef.value.open(data, type, orient);
}
//打开关键词弹窗
function openKeyWordLayer() {
	serverKeyWordRef.value.open(data.serverKeyWordData);
}
//时间弹窗回调传值
function timeLayerCallback(callBackData) {
	data.serverData.worktimestart = callBackData.worktimestart;
	data.serverData.worktimeend = callBackData.worktimeend;
	workTimeRequest(callBackData);
}
async function workTimeRequest(workTime) {
	const res = await setSvcTime(workTime);
	serverTimeRef.value.close();
}
//服务行业弹窗回调传值
function tradeLayerCallback(callBackData) {
	data.serverTradeData = callBackData.text;
	serverTradeRequest(callBackData.id);
}
async function serverTradeRequest(idStr) {
	const res = editTrade({ trade: idStr });
	serverTradeTypeRef.value.close();
}
//服务分类弹窗回调传值
function typeLayerCallback(callBackData) {
	data.serverTypeData = callBackData.text;
	serverTypeRequest(callBackData.id);
}
async function serverTypeRequest(idStr) {
	const res = editSort({ classify: idStr });
	serverTradeTypeRef.value.close();
}
//服务关键词弹窗回调传值
function keyWordLayerCallback(callBackData) {
	data.serverKeyWordData = callBackData;
	keyWordRequest(callBackData);
}
async function keyWordRequest(callBackData) {
	let data = callBackData.join(',');
	const res = await editLabels({ labels: data });
	serverKeyWordRef.value.close();
}
</script>

<style lang="scss">
@import '@/common/css/base.scss';
page {
	background-color: $bgColor;
}
</style>
<style scoped lang="scss">
@import '@/subpages/common/css/set.scss';
.server-info {
	margin: 28rpx;
	border-radius: 16rpx;
	overflow: hidden;
	.set-item {
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
	}
	.item {
		margin-bottom: 28rpx;
		border-radius: 16rpx;
		background-color: #fff;
		.content {
			color: #666;
			padding: 30rpx;
			font-size: 24rpx;
		}
		.tips {
			display: block;
			padding: 0 0 28rpx 28rpx;
			font-size: 24rpx;
			color: #aaaaaa;
			.gl {
				display: inline-block;
				text-decoration: underline;
			}
		}
		.time {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 40rpx 100rpx;
		}
		.type-item {
			display: inline-block;
			padding: 0 20rpx;
			margin-right: 12rpx;
			margin: 0 12rpx 12rpx 0;
			height: 56rpx;
			line-height: 56rpx;
			background: #f5f5f5;
			border-radius: 28rpx;
		}
	}
	.set-item-value {
		color: #666;
		font-size: 28rpx;
		.icon {
			font-size: 28rpx;
		}
	}
}
</style>
